import { useIntersectionObserver } from '@vueuse/core'
import load from '@/assets/images/loading.gif'
export default {
  install (app) {
    // console.log('指令', app)
    /**
     * el:img的dom对象
     * binding.value指令绑定的图片地址
     */
    app.directive('imglazy', {
      // vue2:inserted  vue3:mounted
      mounted (el, binding) {
        // el是dom元素
        console.log('执行', el, binding)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            el.src = load
            // console.log('进入到可视区域', isIntersecting)
            if (isIntersecting) {
              // 定时器的方法
              // setTimeout(() => {
              //   el.src = binding.value
              // }, 2000)
              el.src = binding.value
              // 如果加载失败,显示默认图片
              el.onerror = () => {
                el.src = load
              }
              // 进入到可视区域内，停止
              stop()
            }
          },
          { threshold: 0 }
          // {
          //   threshold: 0  //进入后立马触发
          // }
        )
      }
    })
  }
}
